<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        body{ padding: 20px}
        .chat{
            width: 500px;
            height: 200px;
            border: 1px #333 solid;
            overflow: hidden;
            overflow-y: auto;
            display: flex;
        }
        ul{ list-style-type: none; }
        .oper{
            margin-top: 10px;
        }
        .chat-left{
            flex: 1;
        }
        .chat-right{
            width: 200px;
            border-left: 1px solid red;
        }
        .chat-right li {
            cursor: pointer;
        }
        .chat-right li.this{
            color: #666;
        }
        .color{
            color:aquamarine;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{user.name}}</h1>

        <div class="chat">
            <div class="chat-left">
                <p>正在和 <span class="color">{{toUser.name}}</span> 聊天</p>
                <ul>
                    <li v-for="(item,index) in msgList" :key="index">{{item.msg}}</li>
                </ul>
            </div>
            <div class="chat-right">
                <p>当前在线用户</p>
                <ul>
                    <li v-for="(item, index) in userList" :key="index" :class="{this: user.id === item.id}" @click="selectUser(item)">{{item.name}}</li>
                </ul>
            </div>
        </div>
        <div class="oper">
            <input type="text" v-model="msgVal" :placeholder="placeholder">
            <button type="button" @click="sedMsg">发送</button>
            <button type="button" @click="close">断开连接</button>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://smtpjs.com/v2/smtp.js"></script>
    <script>
        // 这里直接使用
        new Vue({
            el: "#app",
            data: {
                ws: null,
                msgVal: "",
                user: {
                    id: "1001",
                    name: "张三"
                },
                userList: [],
                msgList: [],
                toUser: {
                    id: "",
                    name: ""
                },
                placeholder: "请输入发送内容"
            },
            mounted () {
                let self = this
                this.ws = new WebSocket("ws://localhost:4000/" + this.user.id)
        
                this.ws.onopen = function (msg) {
                    console.log("连接成功...")
                    self.ws.send(JSON.stringify({
                        type: "connect",
                        msg: "张三来报道"
                    }))
                }

                this.ws.onmessage = function (msg) {
                    const res = msg && JSON.parse(msg.data)
                    console.log(`${res.type}: ${res.msg}`)
                    if (res && res.type === "sys_notif") {
                        if (res.userList) {
                            self.userList = res.userList
                        }
                    }
                }
                this.ws.onclose = function (event) {
                    self.close(1)
                }
            },
            methods: {
                sedMsg() {
                    if (this.msgVal === "") {
                        return alert("发送内容不能为空")
                    }
                    if (this.toUser.id === "") {
                        return alert("请选择要发送消息的对象")
                    }
                    if (this.toUser.id === this.user.id) {
                        return alert("不能和自己聊天")
                    }
                    this.ws.send(JSON.stringify({
                        type: "chat",
                        msg: this.msgVal,
                        to: this.toUser.id,
                        from: this.user.id
                    }))
                },
                close(event) {
                    console.log("服务器断开连接了", event)
                    this.ws.close()
                },
                selectUser(item) {
                    this.toUser.id = item.id
                    this.toUser.name = item.name
                }
            }
        })
        
        
    </script>
</body>
</html>